<template>
  <view class="forgetPwdCon">
    <view class="van_top">
      <van-nav-bar title="修改密码" left-arrow @click-left="onClickLeft" fixed />
    </view>
    <view class="content">
      <view class="safe-area" :style="{ height: (statusBarHeight + 46) + 'px' }" style="width: 100%;"></view>
      <view class="pic">
        <image src="/static/login/login.png" mode="aspectFill" />
      </view>
      <view class="form">
        <form @submit="onSubmit">
					<van-field :value="pwdForm.oldPassword" required :name="pwdForm.oldPassword" size="large" type="password" label="原密码"
					  placeholder="8-16位字母或数字" @change="e => pwdForm.oldPassword = e.detail.split(/[\t\r\f\n\s]*/g).join('')">
					</van-field>
          <van-field :value="pwdForm.newPassword" required :name="pwdForm.newPassword" size="large" type="password" label="新密码"
            placeholder="8-16位字母或数字" @change="e => pwdForm.newPassword = e.detail.split(/[\t\r\f\n\s]*/g).join('')">
          </van-field>
          <van-field :value="pwdForm.ackPassword" required type="password" size="large" :name="pwdForm.ackPassword" label="确认密码"
            placeholder="8-16位字母或数字" @change="e => pwdForm.ackPassword = e.detail.split(/[\t\r\f\n\s]*/g).join('')">
          </van-field>
          <view class="btn-box">
            <button class="submit-btn" type="info" form-type="submit">
              确定
            </button>
          </view>
        </form>
      </view>
    </view>

  </view>
</template>

<script>
import app from '@/App.vue'
import { reqUpdatePwd } from '@/apis/user.js'
import formRules from "@/utils/formRules.js"
import md5 from 'md5'
export default {
  name: "ForgetPwd",
  data() {
    return {
      statusBarHeight: app.globalData.statusBarHeight,
      pwdForm: {
        oldPassword: '',
        newPassword: '',
        ackPassword: '',
      },
      rules: {
        oldPassword: [{ required: true, message: '请输入新密码' }, { pattern: /^[a-zA-Z0-9]{8,16}$/, message: '密码格式为8-16位字母或数字' }],
        newPassword: [{ required: true, message: '请输入新密码' }, { pattern: /^[a-zA-Z0-9]{8,16}$/, message: '密码格式为8-16位字母或数字' }],
        ackPassword: [{ required: true, message: '请确认密码' }, { pattern: /^[a-zA-Z0-9]{8,16}$/, message: '密码格式为8-16位字母或数字' }],
      },
      isDataShow: true
    }
  },
  methods: {
    onClickLeft() {
      uni.navigateBack();
    },
    onSubmit(e) {
      if (this.pwdForm.newPassword !== this.pwdForm.ackPassword) {
        uni.showToast({ title: '两次密码不一致', icon: 'none' })
        return;
      }
      let { rules, pwdForm } = this;
      const oldPassword = md5(this.pwdForm.oldPassword)
      const newPassword = md5(this.pwdForm.newPassword)
      const ackPassword = md5(this.pwdForm.ackPassword)
      formRules(rules, pwdForm, async (status) => {
        if (status) {
          console.log('校验通过')
          const res = await reqUpdatePwd({
            oldPassword,
            newPassword,
            ackPassword
          })
          if (res.code === 200) {
						uni.utils.toast('修改密码成功，请重新登录');
            setTimeout(()=>{
							uni.redirectTo({ url: '/pages/login/login' })
						},1000)
          }
        }
      })
      console.log(this.pwdForm)
    }
  }
}
</script>

<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.van_top {
  margin-bottom: 136rpx;
}

// .content {
//   height: 100vh;
//   width: 100vw;

// }

.pic {
  width: 436rpx;
  height: 48rpx;
  margin-left: 52rpx;
  margin-bottom: 96rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

/deep/ .van-cell {
  padding: 24rpx 32rpx;
}

/deep/ .van-cell::after {
  border-bottom: 1px solid #ccc !important;
}

.icon_pic {
  width: 48rpx;
  height: 48rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.form {
  padding: 0 16rpx;
}

.btn-box {
  padding: 64rpx 32rpx;

  .submit-btn {
    width: 100%;
    height: 68rpx;
    line-height: 68rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #FF4F30 0%, #FF1642 100%);
    border-radius: 8rpx;
    margin-bottom: 24rpx;
  }

  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;

    text {
      &:nth-child(1) {
        font-weight: 500;
        font-size: 28rpx;
        color: #999999;
      }

      &:nth-child(2) {
        font-weight: 500;
        font-size: 28rpx;
        color: #FF1642;
      }
    }
  }
}


.btnClass {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220rpx;
  height: 56rpx;
  background: #EEEEEE !important;
  border-radius: 36rpx 36rpx 36rpx 36rpx;
  font-size: 26rpx;
  color: #333333;
  line-height: 56rpx;
  border: 0 !important;
  outline: none;
  box-shadow: none;
}

button::after {
  border: none;
}
</style>